<template>
	<view class="content">
		<!-- 下载App -->
		<view class="mask"></view>
		<view class="download u-flex u-row-between">
			<view class="u-flex">
				<view class="logo">
					<image class="logo-img" src="/static/logo.png" mode=""></image>
				</view>
				<view class="download-content">
					<view class="">中拍汇</view>
					<view>文玩在线直播拍卖</view>
				</view>
			</view>
			<view class="download-btn" @click="openApp()">
				<text>打开APP</text>
				<!-- <a href="zhongpaihui://">打开APP</a> -->
			</view>
		</view>

		<!-- goodsData：轮播图数据  @setShowVideo：视频按钮点击事件 -->
		<cc-videoSwiper :goodsData="goodsData" @setShowVideo="setShowVideo"></cc-videoSwiper>
		<!-- 预览视频弹窗  @touchmove.stop.prevent="ondefault"-->
		<view class="mask" v-if="showVideo == true" @click="hideShow">
			<view class="close">
				<image src="/static/images/goods/close.png"></image>
			</view>
		</view>
		<view class="previewvideo" v-if="showVideo == true">
			<view class="videos">
				<video class="nowvideos" id="nowVideo" v-if="showVideo == true" :src="goodsData.videos"
					:autoplay="showVideo" :show-center-play-btn="true" :show-mute-btn="true"
					:show-fullscreen-btn="false"></video>
			</view>
		</view>
		<!-- 用来承载H5预览视频的 -->
		<view style="position: absolute;top: -999upx;left: -999upx;">
			<video ref="newVideo" id="newVideo" :src="goodsData.videos" :autoplay="showVideo"
				:show-center-play-btn="false" :show-mute-btn="true" :show-fullscreen-btn="false"
				@fullscreenchange="hideShow"></video>
		</view>

		<view class="box1">
			<view class="price u-flex u-col-top">
				<view class="unit">¥</view>
				<view class="num">{{obj.price}}</view>
				<view class="txt">
					<view class="dot"></view>
					<view>当前价</view>
				</view>
			</view>
			<view class="info u-flex u-row-between">
				<view class="col u-flex">
					<view v-if="obj.type==1">原价：¥{{obj.qipaijia}}</view>
					<view>市场价：¥{{obj.old_price}}</view>
				</view>
				<view class="cor u-flex">
					<view class="u-flex"><text class="red">{{list.length}}</text>人想要</view>
					<view>{{obj.hits}}浏览</view>
				</view>
			</view>
			<view class="title">{{obj.title}}</view>
		</view>

		<view class="box2">
			<view class="box-item u-flex u-row-between">
				<view class="left u-flex">
					<image class="img" src="/static/images/baozhang.png" mode="widthFix"></image>
					<view class="title u-flex">
						<text>严格查验</text>
						<text>鉴别真伪</text>
						<text>假一赔三</text>
					</view>
				</view>
			</view>
		</view>

		<view class="box2">
			<view class="box-item u-flex u-row-between">
				<view class="left u-flex">
					<view class="title">发货保障</view>
				</view>
				<view class="txt">72小时不发货可申请退款</view>
			</view>
			<view class="box-item u-flex u-row-between">
				<view class="left u-flex">
					<view class="title">退货无忧</view>
				</view>
				<view class="txt">退货无忧</view>
			</view>
		</view>

		<view class="box3 u-flex u-row-between">
			<image class="head" :src="obj.shopinfo.logo" mode="aspectFill" v-if="obj.shopinfo"
				@click="toUrl('/pages/mine/seller/store?id='+obj.uid)"></image>
			<view class="text" @click="toUrl('/pages/mine/seller/store?id='+obj.uid)">
				<view class="tit" v-if="obj.shopinfo">{{obj.shopinfo.title}}</view>
				<view class="info u-flex">
					<image class="icon" src="/static/images/store-jx2.png" mode="widthFix"></image>
					<text>精选店铺</text>
				</view>
			</view>
			<view class="btns u-flex u-row-between">
				<u-icon @click="collectionHandle" :name="scIs?'heart-fill':'heart'" :color="scIs?'#B20000':'#000000'"
					size="46"></u-icon>
				<image class="btn-item chat" src="/static/images/store-chat2.png" mode="widthFix"
					@click="toUrl('/pages/mine/seller/chat?uid='+obj.uid)"></image>
			</view>
		</view>

		<view class="box4">
			<view class="head u-flex u-row-between">
				<view class="title">商品详情</view>
			</view>
			<view class="parameters">
				<text>{{obj.xingzhuang?'【产状】'+obj.xingzhuang:''}}
					&nbsp;&nbsp;&nbsp;{{obj.chandi?'【产地】' + obj.chandi:''}}
					&nbsp;&nbsp;&nbsp;{{obj.zhongliang?'【重量】'+obj.zhongliang:''}} \n{{obj.chicun?'【尺寸】'+obj.chicun:''}}
					{{obj.shifu?'【雕刻师】' +  obj.shifu : ''}}
					&nbsp;&nbsp;&nbsp;{{obj.leixing?'【类型】'+obj.leixing:''}}</text>
			</view>
			<view class="title2">{{obj.title}}</view>
			<view class="description u-p-b-20">
				<u-parse :html="obj.description"></u-parse>
			</view>
			<view class="images" v-if="obj.body_img">
				<image v-for="(img, index) in obj.body_img.split(',')" :src="img" mode="widthFix"
					@click="perviewImgs(obj.body_img.split(','), index)"></image>
			</view>
			<view class="goods">
				<u-grid :col="3" :border="false" hover-class="none">
					<u-grid-item v-for="(item, index) in swiper1.array2" :key="index">
						<image class="img" :src="item" mode="aspectFill" @click="perviewImg(item, index)"></image>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="info u-flex u-row-between">
				<view class="time">{{$u.timeFrom(new Date(obj.create_time).getTime(), false)}}</view>
				<view class="btns" @click="toUrl('/pages/index/report/report?id='+obj.id)">举报</view>
			</view>
			<view class="coupon u-flex u-row-between" v-show="obj.is_youhuiquan">
				<view class="tit">点击领取优惠券，最高可减20元</view>
				<view class="btns">去领劵</view>
			</view>
			<view class="set u-flex u-row-between">
				<view class="left u-flex">
					<view class="heart u-flex" v-if="list.length">
						<u-icon name="heart-fill" color="#B20000" size="32"></u-icon>
						<text>{{list.length}}</text>
					</view>
					<view class="ls-head u-flex" v-if="list.length">
						<image class="img" :src="item.avatar" mode="aspectFill" v-for="(item,index) in list"
							:key="index"></image>
						<image class="img" src="/static/images/more.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="right u-flex">
					<view class="share u-flex" @click="uniShare">
						<image class="icon" src="/static/images/share.png" mode="widthFix"></image>
						<text>去分享</text>
					</view>
				</view>
			</view>

			<view class="u-m-t-50" v-if="obj.type==2">
				<u-button type="error" shape="circle" class="ykj-red"
					@click="toUrl('/pages/mine/common/submit-order/submit-order?id='+obj.uid)">立即购买</u-button>
			</view>
		</view>

		<view class="box5" v-if="obj.type==1">
			<view class="head u-flex u-row-between">
				<view class="title">商品竞拍中</view>
				<view class="dateTime" v-if="obj.end_time=='已截拍'">距离结束：已截拍</view>
				<view class="dateTime" v-else>距离结束：<u-count-down :timestamp="obj.end_time" font-size="26"
						separator-size="24" separator="zh" show-days show-hours show-minutes show-seconds
						hide-zero-day></u-count-down></view>
			</view>
			<view class="ls-price u-flex">
				<view class="item u-flex">
					<view class="tit">起</view>
					<text>¥{{obj.qipaijia}}元</text>
				</view>
				<view class="item u-flex">
					<view class="tit">加</view>
					<text>¥{{obj.jiajin}}元</text>
				</view>
				<view class="item u-flex">
					<view class="tit">截</view>
					<text>¥{{obj.jiepaijia}}元</text>
				</view>
				<view class="item u-flex" v-if="obj.type==1">
					<view class="tit">保</view>
					<text>¥{{obj.baozhengjin}}元</text>
				</view>
			</view>
			<view class="ls-process u-flex">
				<view class="item">
					<view class="icon">
						<image src="/static/images/process-icon1.png" mode="aspectFill"></image>
					</view>
					<view class="tit">参与出价</view>
				</view>
				<view class="item">
					<view class="icon">
						<image src="/static/images/process-icon2.png" mode="aspectFill"></image>
					</view>
					<view class="tit">价高者得</view>
				</view>
				<view class="item">
					<view class="icon">
						<image src="/static/images/process-icon3.png" mode="aspectFill"></image>
					</view>
					<view class="tit">支付货款</view>
				</view>
				<view class="item">
					<view class="icon">
						<image src="/static/images/process-icon4.png" mode="aspectFill"></image>
					</view>
					<view class="tit">获得宝贝</view>
				</view>
			</view>
			<view class="list1">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" show-scrollbar class="scroll-Y"
					@scrolltolower="lower">
					<view class="item u-flex u-row-between" v-for="(item, index) in list" :key="index">
						<image class="pic" :src="item.avatar" mode="aspectFill"></image>
						<view class="text">
							<view class="hd u-flex">
								<view class="tit">{{item.username}}</view>
								<view class="tag" v-if="index==0">领先</view>
							</view>
							<view class="time">{{$u.timeFrom(item.update_time, false)}}</view>
						</view>
						<view class="price">¥{{item.price}}</view>
					</view>
					<view class="more u-p-t-20 u-p-b-40" v-if="list.length && total > 10">
						<u-loadmore :status="status" />
					</view>
				</scroll-view>
			</view>
			<view class="btns u-flex u-row-center">
				<button class="btn-item yellow" :loading="loading" @click="updataCpList">更新价格</button>
				<button class="btn-item red" @click="toUrl('')">出个价</button>
			</view>
		</view>

		<view class="u-p-b-30"></view>

	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import {
		getToken
	} from '@/utils/auth'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				width: '',
				swiper1: {
					autoplay: false,
					current: 0,
					array: [],
					array2: []
				},
				goodsData: {
					videos: '',
					imgList: [],
				},

				showVideo: false,
				newVideo: null,
				// 轮播区域的高度
				swiperHeight: 350,
				scrollTop: 0,
				id: '',
				scIs: false,
				price: '',
				popShow: false,
				obj: {},
				// 参拍列表参数
				queryParms: {
					page: 0,
					size: 10,
					pai_id: ''
				},
				total: 1,
				list: [],
				loading: false,
				status: 'loadmore',
				payArray: ['支付宝', '微信'],
				payIndex: 0
			}
		},
		onLoad(option) {
			this.newVideo = uni.createVideoContext('newVideo');
			let res = uni.getSystemInfoSync()
			this.width = res.windowWidth;
			if (option.id) {
				this.id = option.id;
				this.getDetails();
			}
		},
		methods: {
			// 打开app
			openApp() {
				console.log('打开App')
				const isIOS = uni.getSystemInfoSync().platform === 'ios';
				const url = isIOS ? 'zhongpaihui://' : 'zhongpaihui://?url=/pages/mine/seller/product-details&id='+this.id;
				// 使用 try-catch 来处理可能的错误
				try {
					console.log(url)
					window.location.href = url;
				} catch (e) {
					// 跳转失败，可能是因为没有安装App
					console.log('App未安装');
					alert('未找到应用，请前往应用市场下载')
					// 可以在这里引导用户前往App Store或者其他备用页面
				}
				// window.location.href = 'zhongpaihui:///pages/mine/seller/product-details?id='+this.id;
			},
			lower(e) {
				if (e.detail.direction == 'bottom') {
					this.getCpList();
				}
			},
			// 收藏操作
			collectionHandle() {
				if (!getToken()) {
					uni.navigateTo({
						url: '/pages/login/login-code'
					})
					return
				}
			},
			// 获取详情信息
			async getDetails() {
				let res = await this.$u.post('/paipin/read?id=' + this.id);
				console.log('产品详情', res)
				if (res.code == 201) {
					this.$u.toast(res.message);
					return false;
				}
				this.obj = res;
				if (res.is_shouchang == 1) {
					this.scIs = true;
				} else {
					this.scIs = false;
				}
				if (res.imgs) {
					var imgs = res.imgs.split(',');
					this.goodsData.imgList = imgs;
				}
				if (res.video) {
					this.goodsData.videos = res.video;
				}

				// 获取拍卖结束时间
				if (res.type == 1 && res.jiepai_time) {
					let curr_time = Math.floor(new Date().getTime() / 1000);
					console.log('curr_time', curr_time)
					console.log('jiepai_time', res.jiepai_time)
					if (res.jiepai_time - curr_time < 0) {
						this.obj.end_time = '已截拍'
					} else {
						this.obj.end_time = res.jiepai_time - curr_time
					}
				}

				// 拍品的时候获取列表
				if (res.type == 1) {
					// 获取参拍列表
					this.getCpList();
				}


				//动态设置swiper的高度
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
			},
			// 获取参拍列表
			getCpList() {
				if (this.list.length >= this.total) return;
				this.queryParms.page++;
				this.queryParms.pai_id = this.obj.pai_id;
				this.status = 'loading';
				this.$u.post('/paipaylog/paiBidList', this.queryParms).then(res => {
					// console.log('参拍列表', res)
					this.loading = false;
					this.total = res.total;
					this.list = [...this.list, ...res.data];
					if (this.list.length >= this.total) {
						this.status = 'nomore';
					} else {
						this.status = 'loading';
					}
				}).catch(() => {
					this.status = 'nomore';
				});
			},
			// 更新参拍列表
			updataCpList() {
				this.list = [];
				this.total = 1;
				this.queryParms.page = 0;
				this.loading = true;
				this.getCpList();
				this.getDetails();
			},
			//动态设置swiper的高度
			setSwiperHeight() {
				let element = "#content-wrap" + this.currentIndex;
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec((res) => {
					if (res && res[0]) {
						this.swiperHeight = res[0].height;
					}
				});
			},
			// 图片预览
			perviewImg(data, index) {
				uni.previewImage({
					urls: this.swiper1.array2,
					current: index
				})
			},
			//操作视频
			setShowVideo(showVideo, isH5) {
				this.showVideo = showVideo
				if (isH5 == true) {
					this.newVideo.play()
				}
				console.log('视频点击播放');
			},
			// 关闭视频
			hideShow() {
				this.showVideo = false
			},
			// 页面跳转
			toUrl(url) {
				if (!getToken()) {
					uni.navigateTo({
						url: '/pages/login/login-code'
					})
					return
				}
				uni.navigateTo({
					url: url
				})
			},
			uniShare() {
				if (!getToken()) {
					uni.navigateTo({
						url: '/pages/login/login-code'
					})
					return
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.return {
		position: absolute;
		top: 40rpx;
		left: 40rpx;
		background-color: rgba(255, 255, 255, .8);
		border-radius: 50%;
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 42rpx;
		z-index: 9999;
		color: #333;
	}

	.pop1 {
		::v-deep .u-mode-center-box {
			border-radius: 28rpx;
		}

		.pop-cont {
			padding: 64rpx 60rpx 50rpx;
			width: 486rpx;
			position: relative;
		}

		.close {
			position: absolute;
			right: 36rpx;
			top: 36rpx;
			width: 36rpx !important;
			height: 36rpx !important;
			z-index: 10;
		}

		.title {
			margin-bottom: 6rpx;
			font-size: 38rpx;
			color: #333333;
			text-align: center;
			line-height: 54rpx;
		}

		.price {
			margin-bottom: 56rpx;
			font-size: 24rpx;
			color: #B20000;
			text-align: center;
			line-height: 34rpx;
		}

		.u-input {
			margin-bottom: 36rpx;
			background-color: #F7E5E5;
			border-radius: 76rpx;

			::v-deep .u-input__input {
				min-height: 88rpx !important;
				height: 88rpx;
				line-height: 88rpx;
			}

			::v-deep .uni-input-placeholder {
				text-align: center;
				height: 44rpx;
				line-height: 44rpx;
			}

			::v-deep .uni-input-input {
				font-size: 26rpx;
				color: #B20000;
				text-align: center;
			}
		}

		.btns {
			margin-bottom: 52rpx;
			height: 72rpx;
			line-height: 72rpx;
			background-color: #B20000;
			border-radius: 76px;
			font-size: 26rpx;
			color: #FFFFFF;
			text-align: center;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			line-height: 34rpx;

			a {
				text-decoration: none;
			}
		}
	}

	.content {
		background-color: #F9F9F9;
	}

	.swiper1 {
		margin-bottom: 40rpx;
		position: relative;

		.slider {
			// min-height: 616rpx;

			.img {
				display: block;
				width: 100% !important;
				height: 100% !important;
			}
		}

		.dot {
			margin: 0 -4rpx;
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			left: 10rpx;
			z-index: 10;

			.dot-item {
				margin: 0 4rpx;
				width: 8rpx;
				height: 8rpx;
				background-color: #F5F5F5;
				border-radius: 50%;
			}

			.dot-item.active {
				width: 24rpx;
				background-color: #B20000;
				border-radius: 12rpx;
			}
		}
	}

	.box1 {
		padding: 20rpx 32rpx 0;

		.red {
			color: #AE2E20;
		}

		.price {
			margin-bottom: 10rpx;

			.unit {
				margin: 10rpx 10rpx 0 0;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
			}

			.num {
				margin-right: 10rpx;
				font-size: 60rpx;
				color: #000000;
				font-weight: bold;
				font-family: Arial;
				line-height: 70rpx;
			}

			.txt {
				margin-top: 18rpx;
				font-size: 20rpx;
				color: #000000;
				line-height: 28rpx;

				.dot {
					margin: 0 6rpx 8rpx;
					display: block;
					width: 6rpx;
					height: 6rpx;
					background-color: #000000;
					border-radius: 50%;
				}
			}
		}

		.info {
			margin-bottom: 28rpx;
			font-size: 26rpx;
			color: #999999;
			line-height: 40rpx;

			.red {
				font-weight: bold;
			}

			.col {
				view {
					margin-right: 15rpx;
				}
			}

			.cor {
				view {
					margin-left: 15rpx;
				}
			}
		}

		.tit {
			font-size: 28rpx;
			color: #000000;
			font-weight: bold;
			line-height: 40rpx;
		}
	}

	.box2 {
		margin: 28rpx 32rpx 20rpx;
		padding: 12rpx 36rpx;
		background-color: #fff;
		box-shadow: 0 8rpx 19rpx rgba(182, 182, 182, 0.07);
		border-radius: 16rpx;

		.box-item {
			min-height: 62rpx;
		}

		.img {
			margin-right: 28rpx;
			width: 64rpx !important;
			// height: 38rpx !important;
			flex-shrink: 0;
		}

		.left {
			margin-right: 50rpx;
		}

		.title {
			font-size: 26rpx;
			color: #000000;

			text {
				margin-right: 30rpx;
			}
		}

		.txt {
			font-size: 26rpx;
			color: #999999;
			flex-grow: 1;
		}

		.right {}
	}

	.box3 {
		margin: 20rpx 32rpx;
		padding: 34rpx 36rpx;
		height: 162rpx;
		background-color: #fff;
		box-shadow: 0px 16 30px 0px rgba(0, 0, 0, 0.02);
		border-radius: 24rpx;
		overflow: hidden;

		.head {
			margin-right: 16rpx;
			width: 88rpx !important;
			height: 88rpx !important;
			border-radius: 50%;
			flex-shrink: 0;
		}

		.text {
			flex-grow: 1;
		}

		.tit {
			font-size: 32rpx;
			color: #000000;
			font-weight: bold;
			line-height: 44rpx;
		}

		.info {
			font-size: 26rpx;
			color: #AA1E14;
			line-height: 42rpx;

			.icon {
				margin-right: 6rpx;
				width: 18rpx !important;
				height: 22rpx !important;
				flex-shrink: 0;
			}
		}

		.btns {
			.btn-item {
				margin-left: 50rpx;
				flex-shrink: 0;
			}

			.heart {
				width: 48rpx;
				height: 42rpx;
			}

			.chat {
				width: 40rpx;
				height: 40rpx;
			}

			.warning {
				width: 44rpx;
				height: 38rpx;
			}
		}
	}

	.box4 {
		margin: 20rpx 32rpx;
		padding: 24rpx 32rpx;
		background-color: #fff;
		box-shadow: 0 16rpx 30rpx rgba(0, 0, 0, 0.02);
		border-radius: 24rpx;

		.head {
			margin-bottom: 30rpx;

			.title {
				padding-left: 30rpx;
				font-size: 24rpx;
				color: #000000;
				position: relative;
			}

			.title::before {
				content: '';
				position: absolute;
				left: 14rpx;
				top: 50%;
				width: 6rpx;
				height: 26rpx;
				background: #B20000;
				transform: translateY(-50%);
			}
		}

		.parameters {
			margin-bottom: 30rpx;
			padding: 0 4rpx;
			font-size: 26rpx;
			color: #999999;
			line-height: 56rpx;
		}

		.title2 {
			margin-bottom: 20rpx;
			padding: 0 16rpx;
			font-size: 26rpx;
			color: #333333;
		}

		.description {
			margin-bottom: 24rpx;
			padding: 0 16rpx;
			font-size: 26rpx;
			color: #999999;
			line-height: 42rpx;
		}

		.goods {
			margin: -14rpx;
			margin-bottom: 14rpx;

			.img {
				display: block;
				width: 100% !important;
				height: 190rpx !important;
				border-radius: 12rpx;
			}

			::v-deep .u-grid-item-box {
				padding: 14rpx !important;
			}
		}

		.info {
			margin-bottom: 20rpx;

			.time {
				font-size: 28rpx;
				color: #828282;
				line-height: 36rpx;
			}

			.btns {
				font-size: 28rpx;
				color: #B20000;
				line-height: 36rpx;
			}
		}

		.coupon {
			margin-bottom: 30rpx;
			padding: 18rpx 28rpx;
			background: rgba(178, 0, 0, 0.1);
			box-shadow: 0 16rpx 30rpx rgba(0, 0, 0, 0.02);
			border-radius: 8rpx;

			.tit {
				font-size: 24rpx;
				color: #B20000;
				line-height: 34rpx;
			}

			.btns {
				margin-left: 20rpx;
				width: 118rpx;
				height: 40rpx;
				line-height: 40rpx;
				background-color: #B20000;
				box-shadow: 0 16rpx 30rpx rgba(0, 0, 0, 0.02);
				border-radius: 42rpx;
				font-size: 20rpx;
				color: #FFFFFF;
				text-align: center;
				flex-shrink: 0;
			}
		}

		.set {
			.left {}

			.right {}

			.heart {
				margin-right: 30rpx;
				font-size: 24rpx;
				color: #B20000;
				line-height: 36rpx;

				::v-deep .u-icon {
					margin-right: 8rpx;
				}

				.icon {
					margin-right: 10rpx;
					width: 32rpx !important;
					height: 28rpx !important;
				}
			}

			.ls-head {
				padding-left: 24rpx;

				.img {
					margin-left: -24rpx;
					width: 64rpx;
					height: 64rpx;
					border: 2rpx solid #FFFFFF;
					border-radius: 50%;
					box-shadow: 0 8rpx 8rpx rgba(0, 0, 0, 0.07);
					background: #F7F7F7;
				}
			}

			.share {
				font-size: 24rpx;
				color: #333333;
				line-height: 36rpx;

				.icon {
					margin-right: 10rpx;
					width: 29rpx !important;
					height: 29rpx !important;
					flex-shrink: 0;
				}
			}
		}
	}

	.box5 {
		margin: 20rpx 32rpx;
		background-color: #fff;
		box-shadow: 0 16rpx 30rpx rgba(0, 0, 0, 0.02);
		border-radius: 24rpx;

		.head {
			padding: 16rpx 30rpx;
			margin-bottom: 30rpx;

			.title {
				padding-left: 16rpx;
				font-size: 28rpx;
				color: #000000;
				position: relative;
			}

			.title::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				width: 6rpx;
				height: 26rpx;
				background: #B20000;
				transform: translateY(-50%);
			}

			.dateTime {
				font-size: 26rpx;
				color: #B20000;
				line-height: 34rpx;
			}
		}

		.ls-price {
			margin-bottom: 40rpx;
			padding: 0 10rpx 0 60rpx;
			flex-wrap: wrap;

			.item {
				margin-bottom: 24rpx;
				width: 33.33%;
				font-size: 26rpx;
				color: #999999;
				flex-shrink: 0;
			}

			.tit {
				margin-right: 8rpx;
				padding: 0 6rpx;
				font-size: 26rpx;
				color: #999999;
				background-color: #F0F0F0;
				border-radius: 6rpx;
			}
		}

		.ls-process {
			margin-bottom: 36rpx;
			padding: 0 30rpx;

			.item {
				width: 25%;
				position: relative;
				flex-shrink: 0;
			}

			.item::before {
				content: '';
				position: absolute;
				right: 0;
				top: 30rpx;
				width: 14rpx;
				height: 12rpx;
				background: url(/static/images/process-arrow1.png) no-repeat center center;
				background-size: contain;
			}

			.item:last-child::before {
				display: none;
			}

			.icon {
				margin: 0 auto 12rpx;
				width: 72rpx;
				height: 72rpx;
				line-height: 72rpx;
				font-size: 0;
				text-align: center;
				background-color: #F7E5E5;
				border-radius: 50%;

				image {
					display: inline-block;
					vertical-align: middle;
					width: 34rpx !important;
					height: 34rpx !important;
				}
			}

			.tit {
				font-size: 24rpx;
				color: #999999;
				line-height: 28rpx;
				text-align: center;
			}
		}

		.list1 {
			border-top: 4rpx solid #F9F9F9;

			.item {
				padding: 36rpx;
				border-bottom: 4rpx solid #F9F9F9;
			}

			.pic {
				margin-right: 24rpx;
				width: 64rpx !important;
				height: 64rpx !important;
				border-radius: 50%;
				flex-shrink: 0;
			}

			.text {
				flex-grow: 1;
			}

			.hd {
				.tit {
					margin-right: 26rpx;
					font-size: 28rpx;
					color: #000000;
					line-height: 42rpx;
					font-weight: bold;
				}

				.tag {
					padding: 0 20rpx;
					font-size: 18rpx;
					color: #FFFFFF;
					text-align: center;
					min-width: 86rpx;
					line-height: 32rpx;
					background: linear-gradient(90deg, #B20000 0%, #F2AEAE 100%);
					box-shadow: 0 16rpx 30rpx rgba(0, 0, 0, 0.02);
					border-radius: 42rpx;
				}
			}

			.time {
				font-size: 24rpx;
				color: #828282;
				line-height: 36rpx;
			}

			.price {
				margin-left: 20rpx;
				font-size: 30rpx;
				color: #B20000;
				flex-shrink: 0;
			}

			.tag.out {
				color: #999999;
				background: #EEECEC;
			}
		}

		.btns {
			padding: 36rpx 0 40rpx;

			.btn-item {
				margin: 0 11rpx;
				width: 276rpx;
				height: 76rpx;
				line-height: 76rpx;
				border-radius: 16rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				box-shadow: 0 16rpx 30rpx rgba(0, 0, 0, 0.02);
			}

			.yellow {
				background-color: #DFAE03;
			}

			.red {
				background-color: #B20000;
			}
		}
	}

	.scroll-Y {
		max-height: 600rpx;
	}

	.bzj {
		.bzj-main {
			padding: 20px;
			height: 140px;
			background-color: #fff;

			.bzj-main-title {
				font-size: 24rpx;
				color: #000;
			}

			.bzj-main-btns {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: row;
				margin-top: 20px;

				.bzj-main-btns-1 {
					width: 130px;
					height: 38px;
					line-height: 38px;
					border: 1px solid #666;
					color: #666;
					margin-right: 10px;
					text-align: center;
					font-size: 14px;
					border-radius: 4px;
				}

				.bzj-main-btns-2 {
					width: 130px;
					height: 38px;
					line-height: 38px;
					margin-left: 10px;
					text-align: center;
					font-size: 14px;
					border-radius: 4px;
					color: #fff;
					background-color: #AE2E20;
				}
			}
		}
	}


	.bzjPay {
		.bzjPay-main {
			position: relative;
			padding: 20px;
			height: 440px;
			background-color: #fff;

			.bzjPay-main-title {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: row;

				.bzjPay-main-title-close {
					position: absolute;
					font-size: 34px;
					left: 20px;
					top: 6px;
				}

				.bzjPay-main-title-text {
					font-size: 18px;
					font-weight: bold;
				}
			}

			.bzjPay-main-subTitle {
				display: flex;
				align-items: end;
				justify-content: center;
				flex-direction: row;
				margin-top: 60px;

				.bzjPay-main-subTitle-1 {
					font-size: 18px;
					margin-bottom: 5px;
					font-weight: bold;
				}

				.bzjPay-main-subTitle-2 {
					font-size: 34px;
					font-weight: bold;
				}
			}

			.bzjPay-main-payType {
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				padding: 15px 0;
				margin: 20px 10px 0;
				border-bottom: 1px solid #F7F7F7;

				.bzjPay-main-payType-value {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-direction: row;

					.bzjPay-main-payType-value-text {
						font-weight: bold;
						margin-top: -3px;
						font-size: 14px !important;
					}

					.bzjPay-main-payType-value-icon {
						margin: 0 0 3px 6px;
						width: 6px;
						height: 10px;
					}
				}
			}

			.bzjPay-main-tips {
				margin-top: 20px;
				padding: 0 10px;

				.bzjPay-main-tips-text1 {
					color: #666;
					font-size: 14px;
				}

				.bzjPay-main-tips-text2 {
					color: #000;
					font-size: 14px;
					font-weight: bold;
				}

				.bzjPay-main-tips-text3 {
					color: #666;
					font-size: 14px;
				}

				.bzjPay-main-tips-text4 {
					color: #DFAE03;
					font-size: 14px;
				}
			}

			.bzjPay-main-btns {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: row;
				margin-top: 40px;

				.bzjPay-main-btns-1 {
					width: 98%;

					height: 38px;
					line-height: 38px;
					margin-left: 10px;
					text-align: center;
					font-size: 14px;
					border-radius: 4px;
					color: #fff;
					background-color: #AE2E20;
				}
			}
		}
	}

	.ykj-red {
		background-color: #AE2E20;
	}

	/* 预览视频弹窗 */
	.mask {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .8);
		z-index: 200;
	}

	.previewvideo {
		width: 100vw;
		height: 100vw;
		position: fixed;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		background-color: #000;
		z-index: 900;
		opacity: 1;
	}

	.close {
		display: flex;
		align-content: center;
		align-items: flex-end;
		position: absolute;
		top: 140upx;
		right: 20upx;
		z-index: 900;

		image {
			width: 50upx;
			height: 50upx;
			display: block;
			justify-content: center;
			margin-left: 30upx;
			margin-bottom: 20upx;
			border-radius: 50%;
			padding: 10upx;
			background-color: rgba(0, 0, 0, 0.2);
		}
	}

	.videos {
		height: 100vw;
		width: 100vw;
		z-index: 10;
		position: relative;

		video {
			width: 100%;
			height: 100%;
		}
	}

	.nowvideos {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}


	.mask {
		position: fixed;
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: rgba(0, 0, 0, .2);
	}

	.download {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: #fff;
		// border-bottom: 3px solid red;
		box-shadow: 0 0 4rpx 2rpx #f7f7f7;
		padding: 30rpx 20rpx;

		.logo {
			width: 100rpx;
			height: 100rpx;
			margin-right: 20rpx;

			.logo-img {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}

		.download-content {
			height: 90rpx;
			display: flex;
			flex-flow: column;
			justify-content: space-between;

			view:nth-of-type(1) {
				font-weight: bold;
				font-size: 32rpx;
			}
		}

		.download-btn {
			a, text {
				display: block;
				padding: 18rpx 28rpx;
				background-color: #AA1E14;
				color: #fff;
				font-size: 28rpx;
				border-radius: 50rpx;
				text-decoration: none;
			}
		}
	}
	.images {
		padding-bottom: 20rpx;
		line-height: 0;
		image {
			width: 100%;
		}
	}
</style>